오랜만에 프로젝트를 초기부터 다시 세팅해보면서, TailwindCSS의 기본단위는 왜 rem을 사용할까에 대한 의문점을 오늘 좀 더 풀어보기로 했다.
2022년도에 웹 접근성을 학습하면서 rem에 대해 간단하게 이해하고 넘어갔던 적이 있다. 그때는 단순하게 root에서 px의 단위를 늘려주면 rem을 사용하고 있는 모든 스타일 속성에 반영되서 일괄 사이즈 변경에 대응하기 용이하다는 것이 내 기억이었다.
하지만, 그것보다는 브라우저에서 폰트 크기를 일괄로 변경할 수 있는 기능이 자체적으로 있는데, 그 폰트 크기를 변경 했을 때 반영되게 하기 위함이 더 큰듯하다. px을 사용해서 이미 스타일을 완성했다면 브라우저 폰트 크기를 변경해도 반영 되지 않을까? 그렇다. Zoom으로 변경하지 않는 이상 브라우저의 폰트 크기 변경에 설정이 반영되지 않는다.
우리는 일반적으로 브라우저를 탐색할 때 Zoom을 이용해서 확대하고 축소한다. 그래서, 브라우저의 폰트 크기는 변경해 본 적이 없는 것이 일반적이다. 하지만, 브라우저는 여전히 폰트 크기를 변경할 수 있는 기능을 제공하고 있다. 일부 저시력자들은 Zoom이 아니라 브라우저 폰트 크기자체를 늘리고 사용하고 있을수도 있다. 따라서, 당장 브라우저 폰트크기 변경해도 대응하기 위해서 rem을 사용해야 한다기 보다는 왜 rem이라는 단위가 존재하는지 알고 있어야 함을 다시 상기했다.
결론을 다시 정리하면, 무조건 rem으로 개발하라는 얘기가 아니다. 알고 사용하지 않는 것과 모르는 것은 다르다. 이전에는 TailwindCSS의 기본 설정을 변경하면서 rem이 아니라 px단위로 사용할 수 있도록 했는데, 이번 프로젝트에서는 rem단위를 최대한 활용해 볼 생각이다.